<template>
  <div>
    <table class="table table-bordered" v-loading="loading">
      <tr>
        <td rowspan="2" width="10%">基本信息</td>
        <td width="10%">项目名称</td>
        <td width="20%">{{ dataInfo.customer_name }}</td>
        <td width="10%">项目类型</td>
        <td width="20%">{{ enumProjectType[dataInfo.project_type] }}</td>
        <td width="10%">贷款人</td>
        <td width="20%">{{ dataInfo.corp_name }}</td>
      </tr>
      <tr>
        <td>联系电话</td>
        <td>{{ dataInfo.mobile_no }}</td>
        <td>地址</td>
        <td colspan="3">{{ dataInfo.address }}</td>
      </tr>
      <tr>
        <td rowspan="3">放款信息</td>
        <td>放款金额</td>
        <td>{{ dataInfo.reply_funds }}</td>
        <td>放款年限</td>
        <td>{{ dataInfo.load_years }}</td>
        <td>放款银行</td>
        <td>{{ dataInfo.bank_name }}</td>
      </tr>
      <tr>
        <td>贷款日期</td>
        <td colspan="2">{{ $utils.dateFormat(dataInfo.load_date, 'yyyy-MM-dd') }}</td>
        <td>到期日期</td>
        <td colspan="2">{{ $utils.dateFormat(dataInfo.load_end_date, 'yyyy-MM-dd') }}</td>
      </tr>
      <tr>
        <td>贷款用途</td>
        <td colspan="5">{{ dataInfo.funds_use_dir }}</td>
      </tr>
      <tr>
        <td rowspan="2">担保信息</td>
        <td>担保机构</td>
        <td>{{ dataInfo.service_name }}</td>
        <td>担保意见</td>
        <td colspan="3">{{ dataInfo.res_option }}</td>
      </tr>
      <tr>
        <td>反担保措施</td>
        <td colspan="5">{{ dataInfo.counter_guarantee }}</td>
      </tr>
      <tr>
        <td rowspan="2">合同信息</td>
        <td>担保意向函编号</td>
        <td>{{ register.ele_no }}</td>
        <td>放款通知书编号</td>
        <td>{{ register.loan_notice_no }}</td>
        <td>委托合同号</td>
        <td>{{ register.entrust }}</td>
      </tr>
      <tr>
        <td>反担保合同号</td>
        <td>{{ register.gua_no }}</td>
        <td>保证合同号</td>
        <td>{{ register.ensure_contract_no }}</td>
        <td>借款合同号</td>
        <td>{{ register.credit_contract_no }}</td>
      </tr>
      <tr>
        <td>还款信息</td>
        <td>还款方式</td>
        <td colspan="2">
          <span>{{ enumRepayType[register.repay_method] || '-' }}</span>
        </td>
        <td>还款计划</td>
        <td colspan="2">
          <el-button @click="showViewRepayList">查看还款计划</el-button>
        </td>
      </tr>
    </table>
    <el-dialog
      top="30px"
      width="567px"
      append-to-body
      title="还款计划"
      class="dialog-sm"
      :close-on-click-modal="false"
      :before-close="onRepayClose"
      :visible.sync="repayVisible"
    >
      <el-table :data="viewRepayList" v-loading="repayLoading" height="500px" border>
        <el-table-column label="还款时间" prop="pay_time" align="center">
          <template slot-scope="scope">
            <span>{{ $utils.dateFormat(scope.row.pay_time, 'yyyy年MM月dd日') }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="是否需还本"
                         align="center">
          <template slot-scope="scope">
            <span>{{enumRepayInterest[scope.row.is_capital]}}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="本金（元）" prop="capital" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.is_capital === '1' ? scope.row.capital : '-' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="是否需还息"
                         align="center">
          <template slot-scope="scope">
            <span>{{enumRepayInterest[scope.row.is_interest]}}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="还息（元）" prop="interest" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.is_interest === '1' ? scope.row.interest : '-' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="row-sum">
        <div class="row-sum-td">合计</div>
        <div class="row-sum-td"></div>
        <div class="row-sum-td">
          <span class="pr-3">{{ viewSums[0] }}</span>
        </div>
        <div class="row-sum-td"></div>
        <div class="row-sum-td">
          <span class="pr-3">{{ viewSums[1] }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { enumProjectType } from '@/gov/plugins/enum'
import { enumRepayType } from '@/credit/plugins/enum'
export default {
  components: {},
  props: {
    dataInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      enumProjectType,
      enumRepayType,
      loading: false,
      register: {},
      repayVisible: false,
      repayLoading: false,
      enumRepayInterest: {
        0: '否',
        1: '是',
      },
      viewRepayList: [],
    }
  },
  computed: {
    viewSums() {
      return this.getSums(this.viewRepayList)
    },
  },
  watch: {
    dataInfo: {
      handler: function (val) {
        this.getData()
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  created() {},
  methods: {
    showViewRepayList() {
      this.repayVisible = true
      if (!this.viewRepayList.length) {
        this.getRepayList()
      }
    },
    onRepayClose() {
      this.repayVisible = false
    },
    getData() {
      this.loading = true
      const params = { 'customer_related_id.eq': this.dataInfo.customer_related_id }
      this.$api
        .getData(this.$serviceName, 'contract_no_view', params)
        .then(res => {
          this.register = (res && res.data && res.data[0]) || []
        })
        .finally(() => {
          this.loading = false
        })
    },
    async getRepayList() {
      if (!this.dataInfo.customer_related_id) return
      this.repayLoading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(
          this.$serviceName,
          'datum_repay_list',
          {
            'customer_related_id.eq': this.dataInfo.customer_related_id,
          },
          { pay_time: 'asc' }
        )
      )
      this.repayLoading = false
      this.viewRepayList = (res && res.data) || []
    },
    getSums(list) {
      let [capitalSum, interestSum] = [0, 0]
      for (const item of list) {
        if (item.is_capital === '1') {
          const capital = Number.parseFloat(item.capital)
          capitalSum += isNaN(capital) ? 0 : capital
        }
        if (item.is_interest === '1') {
          const interest = Number.parseFloat(item.interest)
          interestSum += isNaN(interest) ? 0 : interest
        }
      }
      return [Math.round(capitalSum * 1e2) / 1e2, Math.round(interestSum * 1e2) / 1e2]
    },
  },
}
</script>
<style lang="scss" scoped>
.table-bordered td {
  border: 1px solid;
  border-color: #333;
  padding: 0.25rem;
  text-align: center;
  vertical-align: middle;
}
.row-sum {
  background-color: $gray-100;
  padding-right: 20px;
  display: flex;
  flex-wrap: nowrap;
  .row-sum-td {
    flex: 1;
    padding: 0.5rem 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }
}
</style>
